import { defineComponent } from 'vue';
import { BasicTable, useTable } from '/@/components/Table';
import { getReserveSeatListApi, cancelReserveSeatApi } from './service';
import { useModal } from '@/components/Modal';
import { createTableAction } from '/@/components/Table/src/hooks/createTableAction';
import { useMessage } from '/@/hooks/web/useMessage';
import { getStatus, getTableColumns } from './tableConfig';
import { getStudyRoomListApi } from '../studyRoom/service';
import { useUserStore } from '/@/store/modules/user';
import ActionModal from './modules/ActionModal';
import SeatedModal from './modules/SeatedModal';
import UploadFaceModal from './modules/UploadFaceModal';

import './face-api';

export default defineComponent({
  name: 'ReserveSeat',
  setup() {
    const { UserID, Role }: any = useUserStore().getUserInfo;
    const {
      createMessage: { success, error },
    } = useMessage();
    const [registerTable, { reload }] = useTable({
      title: '预约记录',
      api: getReserveSeatListApi,
      beforeFetch: async (params) => {
        Role === 'Student' && (params.UserID = UserID);
        return params;
      },
      fetchSetting: {
        listField: 'data.records',
      },
      columns: getTableColumns(),
      showTableSetting: true,
      bordered: true,
      useSearchForm: true,
      formConfig: {
        labelWidth: 80,
        baseColProps: { span: 5 },
        schemas: [
          {
            field: 'RoomID',
            label: '自习室名称',
            component: 'ApiSelect',
            componentProps: {
              api: async () => {
                const res = await getStudyRoomListApi({ page: 1, pageSize: 100 });
                return res.data;
              },
              resultField: 'records',
              labelField: 'RoomName',
              valueField: 'RoomID',
            },
          },
          {
            field: 'Date',
            label: '使用日期',
            component: 'DatePicker',
            componentProps: {
              style: 'width:100%',
              valueFormat: 'YYYY-MM-DD',
            },
          },
        ],
      },
      actionColumn: {
        width: 260,
        title: '操作',
        fixed: 'right',
        customRender: ({ record }) =>
          createTableAction([
            {
              label: '入座',
              onClick: () => {
                if (!['预约中'].includes(getStatus(record))) {
                  // return error('仅预约中状态可才可以认证入座');
                }
                openSeatedModal(true, { record, type: 'add' });
              },
            },
            {
              label: '离座',
              onClick: () => {
                if (!record.BeSeatedTime) {
                  return error('请先认证入座');
                }
                openSeatedModal(true, { record, type: 'edit' });
              },
            },
            {
              label: '编辑',
              icon: 'ant-design:edit-outlined',
              onClick: () => {
                openModal(true, { record, type: 'edit' });
              },
            },
            {
              label: '取消预约',
              danger: true,
              icon: 'ant-design:delete-outlined',
              popConfirm: {
                title: '确定取消预约？',
                confirm: async () => {
                  if (!['预约中', '未开始'].includes(getStatus(record))) {
                    return error('当前状态不能取消');
                  }
                  await cancelReserveSeatApi({ ReserveSeatID: record.ReserveSeatID });
                  success('取消成功');
                  reload();
                },
              },
            },
          ]),
      },
    });

    const [registerModal, { openModal }] = useModal();
    const [registerSeatedModal, { openModal: openSeatedModal }] = useModal();
    const [registerUploadFaceModal, { openModal: openUploadFaceModal }] = useModal();

    const tableTopAction = createTableAction(
      [
        {
          label: '新增预约',
          icon: 'ant-design:plus-outlined',
          onClick: () => {
            if (!(useUserStore().getUserInfo as any)?.FaceUrl) {
              error('请先上传人脸认证信息');
              openUploadFaceModal(true, {});
              return;
            }
            openModal(true, { type: 'add' });
          },
        },
        {
          label: '修改人脸信息',
          icon: 'ant-design:edit-outlined',
          ifShow: !!(useUserStore().getUserInfo as any)?.FaceUrl,
          onClick: () => {
            openUploadFaceModal(true, {});
          },
        },
      ],
      { type: 'top', outside: true },
    );
    return () => (
      <div class="p-4">
        <BasicTable onRegister={registerTable}>
          {{
            headerTop: () => tableTopAction,
          }}
        </BasicTable>
        <ActionModal onRegister={registerModal} onReload={reload} />
        <SeatedModal onRegister={registerSeatedModal} onReload={reload} />
        <UploadFaceModal onRegister={registerUploadFaceModal} onReload={reload} />
      </div>
    );
  },
});
